<template>
  <div class="container">
    <div class="searchForm">
      <el-form ref="wlForm" :model="form" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item style="width:100%" label="订阅时间">
              <!-- <el-input v-model="form.filter.fbsj"></el-input> -->
              <div style="display:flex;width:100%">
                <el-date-picker
                  v-model="form.filter.kssj"
                  type="date"
                  placeholder="开始日期"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsStart"
                ></el-date-picker>
                <span style="margin: 0 10px">至</span>
                <el-date-picker
                  v-model="form.filter.jssj"
                  type="date"
                  placeholder="结束日期"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsEnd"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="能力名称">
              <el-input v-model="form.filter.nlmc" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应用系统">
              <el-input v-model="form.filter.yyxt" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10" type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item style="width:100%" label="状态">
              <el-select
                style="width:100%"
                v-model="form.filter.spzt"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in stateList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关键字">
              <el-input v-model="form.filter.gjc">
                <el-button @click="keywordsClick" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align:right">
            <el-button type="primary" @click="changePageNum(1)">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tabs-lb">
      <!-- <span>服务订阅</span> -->
      <button @click="$router.push('/nlsq')" class="btn_operation_add">
        <img src="~@/assets/img/grzx/add.png" alt />
        新增订阅
      </button>
    </div>

    <div class="bottom">
      <!-- 表格展示 -->
      <div class="tableBox">
        <el-table :data="tableData" style="min-height:550px" border stripe>
          <!-- <el-table-column prop="jkbh" label="能力编号" align="center" :show-overflow-tooltip="true"></el-table-column> -->
          <el-table-column prop="jkmc" label="能力名称" align="center" :show-overflow-tooltip="true"></el-table-column>
          <!-- <el-table-column prop="ak" label="AK" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="sk" label="SK" align="center" :show-overflow-tooltip="true"></el-table-column>-->
          <el-table-column prop="yyxt" label="应用系统" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="sqrymc" label="订阅人" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="sqdwmc" label="订阅单位" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="syksrq" label="订阅时间" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="syjsrq" label="到期时间" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="zdycs" label="总调用次数" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column
            prop="jrdycs"
            label="今日调用次数"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="spzt" label="状态" align="center" :show-overflow-tooltip="true">
            <template slot-scope="{ row }">
              <div
                :class="row.spzt === '待授权' ? 'color-skyblue':''"
                v-if="row.spzt === '待授权'"
              >{{row.spzt}}</div>
              <div :class="row.spzt === '拒绝' ? 'color-red':''" v-if="row.spzt === '拒绝'">{{row.spzt}}</div>
              <div
                :class="row.spzt === '通过' ? 'color-green':''"
                v-if="row.spzt === '通过'"
              >{{row.spzt}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-link v-if="scope.row.spzt === '拒绝'" type="primary" @click="handleDy(scope.row)">订阅</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        background
        @size-change="changePageSize"
        @current-change="changePageNum"
        :current-page="form.pageNum"
        :page-sizes="[100, 200, 500, 1000]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import dyglService from "@/api/dygl";
export default {
  data() {
    return {
      tableData: [],
      // 订阅日期
      getTimeData: '',
      form: {
        pageNum: 1,
        pageSize: 100,
        filter: {
          kssj: '',
          jssj: '',
          nlmc: '',
          yyxt: '',
          spzt: '',
          gjc: '',
        },
      },
      stateList: [
        {
          label: '待授权',
        },
        {
          label: '通过',
        },
        {
          label: '拒绝',
        },
      ],
      total: 0,
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.form.filter.jssj;
          if (endDateVal) {
            return (
              time.getTime() > new Date(endDateVal).getTime()
            );
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.form.filter.kssj;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
    };
  },

  mounted() {
    this.getListData();
  },

  methods: {
    //表格数据获取
    getListData() {
      const params = { ...this.form };
      dyglService
        .queryWddy(params)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //分页
    changePageNum(val) {
      this.form.pageNum = val;
      this.getListData();
    },
    //分页
    changePageSize(val) {
      this.form.pageSize = val;
      this.form.pageNum = 1;
      this.getListData();
    },
    // 点击订阅
    handleDy(row) {
      this.$router.push({
        path: "/nlsq",
        query: {
          cs: row.jkbh,
        },
      });
    },
    // 日期发生变化的时候
    dataChange(val) {
      if (!val) {
        this.form.filter.kssj = '';
        this.form.filter.jssj = '';
      } else {
        this.form.filter.kssj = val[0];
        this.form.filter.jssj = val[1];
      }
    },
    // 点击搜索关键字
    keywordsClick() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        filter: {
          gjc: this.form.filter.gjc,
        },
      };
      dyglService
        .queryWddy(params)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  border: 1px solid #cecece;
  background-color: #fff;
  padding: 25px 20px 20px 20px;

  .searchForm {
    border-bottom: 1px solid #cecece;
    padding-bottom: 5px;
  }

  .tabs-lb {
    margin-top: 10px;
    border-bottom: none;
  }

  .bottom {
    // padding: 15px;
    margin-top: 20px;
    background-color: white;
    width: 100%;
  }
  .page {
    // position: absolute;
    // left: 40%;
    // bottom: 5%;
    margin-top: 20px;
    text-align: center;
  }
}

.color-red {
  color: #f76767;
}

.color-skyblue {
  color: #0eb0ec;
}

.color-green {
  color: #38b659;
}
</style>